<template>
	<view>
		<u-navbar title="额度明细" :autoBack="true" :placeholder="true" leftIconColor="#ffffff" :titleStyle="{color: '#ffffff'}" bgColor="#e60000" />
		
    <view class="flex margin">
			<view class="flex w-100">
				<view class="tab-item margin-right-xl" :class="{'tab-item-active': tabIndex == 0}" @click="selectTab(0)">支出</view>
				<view class="tab-item" :class="{'tab-item-active': tabIndex == 1}" @click="selectTab(1)">收入</view>
			</view>
		</view>
		
		<view>
			<view class="bg-white margin-lr padding margin-bottom radius-8 card-shadow" v-if="tabIndex == 0" v-for="(item, index) in dataList" :key="index">
				<view class="flex justify-between font-15 text-bold">
					<view>报单审核</view>
					<view>-{{item.money}}</view>
				</view>
				<view class="line-h-50 color-gray m-t-10">
				<view>{{ item.nickName }}: {{item.mobile}}</view>
				<view>用户ID: {{item.userId}}</view>
				<!-- <view>报单数量: {{item.buyCount}}</view> -->
				<view>总金额: {{item.money}}</view>
				<view>备注: {{item.remark}}</view>
				</view>
				<view class="flex align-center justify-between margin-top-sm text-gray">
					<view>时间:{{ item.createTime }}</view>
					<view>余额:{{ item.lastMoney }}</view>
				</view>
			</view>
      <view class="bg-white margin-lr padding margin-bottom radius-8 card-shadow" v-if="tabIndex == 1" v-for="(item, index) in dataList" :key="index">
				<view class="flex justify-between font-15 text-bold">
					<view>收入</view>
					<view>+{{item.money}}</view>
				</view>
				<view class="flex align-center justify-between margin-top-sm text-gray">
					<view>拨款备注:{{ item.comment }}</view>
				</view>
				<view class="flex align-center justify-between margin-top-sm text-gray">
					<view>时间:{{ item.createTime }}</view>
					<view>余额:{{ item.lastMoney }}</view>
				</view>
			</view>
		</view>
		
		<u-loadmore :status="status" color="gray" class="padding-bottom padding-top-xs"/>
		
	</view>
</template>

<script>
	import { mapState } from 'vuex'
  	import { getIncomeList,getCentreList } from '@/common/api/serviceCenter.js'
	export default {
		data() {
			return {
				tabIndex: 0,
				status: 'loading',
				pageNo: 0,
				dataList: [],
			};
		},
		computed: {
			...mapState('user', ['userInfo'])
		},
    onShow(){
      this.selectTab(1)
    },
		onReachBottom() {
			if(this.status !== 'nomore'){
				if(this.tabIndex == 0) {
					this.getPayoutData()
				}
				if(this.tabIndex == 1) {
					this.getIncomeData()
				}
			}
		},
		methods: {
      // 切换收入支出
			selectTab(index) {
				this.tabIndex = index
				if(this.tabIndex == 0) {
					this.resetData()
					this.getPayoutData()
				}
				if(this.tabIndex == 1) {
					this.resetData()
					this.getIncomeData()
				}
			},
      // 获取收款数据
      getIncomeData(){
			this.pageNo++
			this.status = 'loading'
			let params = {
				pageNo: this.pageNo,
				pageSize: 10
			}
			getIncomeList(params).then(res => {
          if(res.code  == 200 ){
            this.dataList = this.dataList.concat(res.data)
            if (res.data.length < 10) {
              this.status = 'nomore'
            }
          }
				})
      },
      // 获取支出数据
      getPayoutData(){
			this.pageNo++;
			this.status = 'loading';
			let params = {
				pageNo: this.pageNo,
				pageSize: 10,
				state: 2
			}
			getCentreList(params).then(res => {
          if(res.code  == 200 ){
            this.dataList = this.dataList.concat(res.data)
            if (res.data.length < 10) {
              this.status = 'nomore'
            }
          }
				})
      },
      // 重置数据
			resetData() {
				this.pageNo = 0
				this.dataList = []
			},
		}
	}
</script>

<style lang="scss">
page {
	background: #f2f2f2;
}
</style>
<style lang="scss" scoped>
.head {
	.copy-btn {
		border: 2rpx solid #808080;
		color: #808080;
		font-size: 20rpx;
		padding: 2rpx 10rpx;
		margin-left: 20rpx;
		border-radius: 6rpx;
	}
}
.level {
	background: linear-gradient(-90deg, #FF9701 0%, #FFB21F 100%);
	color: #ffffff;
	font-size: 24rpx;
	padding: 2rpx 20rpx;
	border-radius: 6rpx;
	margin-left: 20rpx;
	min-width: 96rpx;
	text-align: center;
}
.tab-item {
	width: 50%;
	height: 64rpx;
	box-shadow: 0rpx 2rpx 10rpx 1rpx rgba(250,49,33,0.24);
	color: #FA3121;
	font-size: 30rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #FA3121;
	border-radius: 16rpx;
}
.tab-item-active {
	background: linear-gradient(42deg, #FF0804 0%, #FC7844 100%);
	color: #ffffff;
	border: none !important;
}
.card-shadow {
	box-shadow: 0px 2px 8px 1px rgba(47,78,123,0.04);
}
</style>
